<template>
	<view class="contanier">
		<scroll-view class="scorll-content" :scroll-y="true">
			<block v-for="(item,idx) in payList" :key="'pay-item-'+idx">
				<CardBox :title="item.title" :contentOption="expanDataOpt" :contentData="item"
						:actList="actList">
					<template #rightTitle>
						<view class="text-error" style="font-weight: bold;">￥{{ item.price }}</view>
					</template>
				</CardBox>
			</block>
			<view class="scorll-block" ></view>
		</scroll-view>
		<view class="add-btn" @click="toEdit(-1)">
			<view class="iconfont aa-plus"></view>
		</view>
	</view>
	
</template>

<script setup>
	import CardBox from '@/components/CardBox.vue';
	import {ref} from "vue"
import { ProjectDetailDelReq, ProjectDetailListReq } from '../../../http/projectDetails';
import { MyAlert } from '../../../utils/utils';
import { useProjectStore } from '../../../store/projectStore';
	
	const {project} = useProjectStore()

	const payList=ref([])

	const actList=[
		{
			label:"修改",
			click:(e)=>{
				console.log(e)
				toEdit(e.id)
			}
		},
		{
			label:"删除",
			type:"error",
			click:async (e)=>{
				await MyAlert({title:"删除",content:"是否删除这个"+e.title})
				ProjectDetailDelReq({id:e.id}).then(res=>{
					MyAlert({title:"删除",content:res.msg}).finally(()=>{
						getProjectDetailsList()
					})

				})
			}
		},
	]

	const expanDataOpt=[
		{
			label:"支付人",
			name:"payer_desc"
		},
		{
			label:"所属组",
			name:"payGroupId_desc"
		},
		{
			label:"支付日期",
			name:"payDate"
		},
		{
			label:"修改时间",
			name:"updatedAt"
		},
		{
			label:"备注说明", 
			name:"remask"
		},
	]

	const getProjectDetailsList=()=>{
		ProjectDetailListReq({}).then((res)=>{
			payList.value=[...res.data.list]
		})
	}

	const toEdit=(pid)=>{
		uni.navigateTo({
			url:"/pages/aaProject/aaItem/edit",
			success: (res) => {
				res.eventChannel.emit("editData",{id:pid})
				res.eventChannel.on("refresh",()=>{
					getProjectDetailsList()
				})
			}
			
		})
	}

	getProjectDetailsList()

	

</script>

<style lang="scss" scoped>
	.contanier{
		height: 100%;
		position: relative;
		.scorll-content{
			height: 100%;
		}
		.scorll-block{
			height: 220upx;
			width: 1px;
		}
	}
	.add-btn{
		background-color: #f8744d;
		color: #fff;
		position: absolute;
		bottom: 0;
		right: 0;
		margin: 60upx;
		text-align: center;
		border-radius: 50%;
		.iconfont{
			font-size: 60upx;
			font-weight: bold;
			padding: 13px;
		}
	}
	
</style>
